<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <title>续单</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        body {
            width: 100%;
            background-color: #fff;
            font-size: 0.25rem;
            height: auto;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: Helvetica;
            color: rgba(24, 24, 24, 0.65);
        }

        .showdetial {
            width: 100%;
            box-sizing: border-box;
            height: auto;
        }

        .showli {
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            -webkit-flex-direction: column;
            box-sizing: border-box;
        }

        .showli li {
            padding: 0 0.24rem;
            padding-top: 0.07rem;
            background-color: #fff;
        }

        .showli li p {
            width: 100%;
            height: 0.4rem;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            align-items: center;
            -webkit-align-items: center;
        }

        .buttonsmall {
            background-color: #fff;
            text-align: center;
            padding: 0.3rem 0;
            margin-top: 0.2rem;
            border-top: 0.2rem solid #f7f7f7;
        }

        .buttonsmall button {
            color: #181818;
            font-size: 0.26rem;
            width: 6.9rem;
            height: 0.88rem;
            background-color: #ffd203;
            outline: none;
            border: none;
            border-radius: 0.1rem;
        }

        .aui-switch {
            width: 1rem;
            height: 0.54rem;
            position: relative;
            vertical-align: top;
            border: 1px solid #dddddd;
            background-color: #dddddd;
            border-radius: 0.54rem;
            background-clip: content-box;
            display: inline-block;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
            /*-webkit-user-select: none;*/
            /*user-select: none;*/
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            -webkit-transition: all 0.2s linear;
            transition: all 0.2s linear;
        }

        .aui-switch:before {
            width: 0.53rem;
            height: 0.53rem;
            position: absolute;
            top: -0.01rem;
            left: -0.02rem;
            border-radius: 0.5rem;
            background-color: #fff;
            content: "";
            -webkit-transition: left 0.2s;
            transition: left 0.2s;
        }

        .aui-switch:checked {
            border-color: #ffd203;
            background-color: #ffd203;
        }

        .aui-switch:checked:before {
            left: 0.42rem;
        }

        .chooseRenewDays {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            box-sizing: border-box;
        }

        .chooseRenewDays div {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.18rem;
            margin-bottom: 0.1rem;
        }

        .chooseRenewDays div p {
            width: auto;
            margin: 0;
            padding: 0;
        }

        input[type="radio"]+label::before {
            content: "\a0";
            display: inline-block;
            vertical-align: middle;
            width: 0.32rem;
            height: 0.32rem;
            margin-right: .1rem;
            border-radius: 50%;
            border: 1px solid #DBDBDB;
        }

        input[type="radio"]:checked+label::before {
            width: 0.2rem;
            height: 0.2rem;
            background-color: #ffd203;
            background-clip: content-box;
            border: 1px solid #ffd203;
            padding: 0.06rem;
        }

        input[type="radio"] {
            position: absolute;
            clip: rect(0, 0, 0, 0);
        }

        .chooseRenewDays label {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            margin-left: 0.1rem;
        }

        .blanceNum {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            padding: 0 0.28rem;
            box-sizing: border-box;
        }

        .blanceNum li {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: flex-start;
            padding: 0 0.28rem;
            box-sizing: border-box;
            margin-bottom: 0.45rem;
        }

        .blanceNum li img {
            width: 0.5rem;
            margin-right: 0.16rem;
        }

        .blanceNum li p:first-of-type {
            width: 2rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            margin-right: 0.6rem;
        }

        .showli .renewNumLimit {
            flex-direction: column;
            padding-bottom: 0.2rem;
        }

        .showli li .limitNoTips {
            justify-content: flex-start;
            font-size: 0.22rem;
            color: #DD9217;
        }

        .inputChecked+label::before {
            content: " ";
            display: inline-block;
            width: 0.4rem;
            height: 0.4rem;
            box-sizing: border-box;
            background: url("../../image/checkimng.png") center center no-repeat;
            background-size: 100% 100%;
            padding: .1rem;
            border-radius: 0.03rem;
            margin-right: 0.1rem;
        }

        .inputChecked:checked+label::before {
            display: inline-block;
            width: 0.4rem;
            height: 0.4rem;
            box-sizing: border-box;
            background: url("../../image/iconxuangousuanlibao.png") center center no-repeat;
            background-size: 100% 100%;
            padding: .1rem;
            border: none;
            border-radius: 0.03rem;
            margin-right: 0.1rem;
        }

        .inputChecked {
            position: absolute;
            clip: rect(0, 0, 0, 0);
        }
    </style>
</head>

<body>
    <div class="showdetial">
        <ul class="showli">
            <li>
                <p>
                    <span>
                        合约包名称
                    </span>
                    <span class="machineName">

                    </span>
                </p>
            </li>
            <li>
                <p>
                    <span>
                        原合约金额
                    </span>
                    <span>
                        <span class="unitPrice">

                        </span>
                        <span class="payMethod">

                        </span>
                    </span>
                </p>
            </li>
            <li>
                <p>
                    <span>
                        原BTC算力
                    </span>
                    <span class="paowersuan">

                    </span>
                </p>
            </li>
            <li class="showBhpPowerNum" style="display: none;">
                <p>
                    <span>
                        原BHP参配算力
                    </span>
                    <span class="paowersuanBhp">

                    </span>
                </p>
            </li>
            <li style="border-bottom:0.2rem solid #fff;">
                <p>
                    <span>
                        合约周期
                    </span>
                    <span class="cantractDays">
                        --天
                    </span>
                </p>
            </li>
            <li style="display: inline-block;height: 0.1rem;background-color: #f7f7f7;">

            </li>
        </ul>
    </div>
    <div class="renewalOrder">
        <ul class="showli">
            <li
                style="border-top: 0.1rem solid #ffffff;border-bottom: 1px solid #EEEEEE;padding-bottom: 0.2rem;font-family:PingFang SC;font-weight:normal;font-weight: 580;color:rgba(38,38,38,1);font-size: 0.3rem;">
                <p>
                    <span>
                        续单信息
                    </span>
                </p>
            </li>
            <li class="chooseRenewDays">
                <p style="font-size: 0.28rem;color:#282828;">
                    续单天数
                </p>
                <div id="renewDays">
                    <p>
                        <input type="radio" value="30" name="chooseDays" id="thirtydays">
                        <label for="thirtydays">
                            30天
                        </label>
                    </p>
                    <p>
                        <input type="radio" value="90" name="chooseDays" id="ninetydays">
                        <label for="ninetydays">
                            90天
                        </label>
                    </p>
                    <p>
                        <input type="radio" value="180" name="chooseDays" id="halfyear">
                        <label for="halfyear">
                            180天
                        </label>
                    </p>
                    <p>
                        <input type="radio" value="360" name="chooseDays" id="oneyear">
                        <label for="oneyear">
                            360天
                        </label>
                    </p>
                </div>
            </li>
            <li class="renewNumLimit" style="border-bottom:0.2rem solid #f7f7f7;">
                <p>
                    <span style="color: #595959;font-size: 0.28rem;">
                        续单库存
                    </span>
                    <span class="limitNumData" style="font-size:0.28rem;color: #FF5353;">
                        --T
                    </span>
                </p>
                <p class="limitNoTips" style="display: none;">
                    <img src="../../image/tishiasd.png" alt="" style="width: 0.22rem;margin-right: 0.1rem;">
                    续单库存不足,请选择其它锁定期
                </p>
                <p class="inputBox" style="margin-top: 0.14rem;display: none;">
                    <input type="checkbox" class="inputChecked" value="checkSuanlibao" name="chooseOutcoin"
                        id="checkchargeBtc">
                    <label for="checkchargeBtc"
                        style="position: relative;width: 100%;display: flex;align-items: center;justify-content: flex-start;">
                        <b style="font-weight: 500;">
                            加入续单<span class="daysNum">30</span>天排队，每天自动尝试进行一次续单
                        </b>
                    </label>
                </p>
            </li>
            <li class="showActiviy" style="height: auto;flex-direction: column;display: none;">
                <p>
                    <span>
                        续单生效时间
                    </span>
                    <span class="arriveTimenew">
                        --
                    </span>
                </p>
                <p style="font-size: 0.22rem;color: #DE9218;">
                    到手算力以生效时平台公示为准
                </p>
            </li>
            <li>
                <p>
                    <span>
                        锁定到期时间
                    </span>
                    <span class="arriveTime">
                        --
                    </span>
                </p>
            </li>
            <li id="hashrate">
                <p>
                    <span>
                        续单后BTC算力
                    </span>
                    <span style="display: flex; display: -webkit-flex;align-items: center;-webkit-align-items: center;">
                        <span class="showActiviy"
                            style="font-size:0.22rem;color:#9A9A9A;margin-right: 0.1rem;display: none;">
                            预计
                        </span>
                        <span class="chooseText">

                        </span>
                        <img src="../../image/right_jintoux.png"
                            style="width: 0.12rem;height: 0.22rem;margin-left: 0.2rem;">
                    </span>
                </p>
            </li>
            <li class="showBhpPowerNum" style="display: none;">
                <p>
                    <span>
                        续单后BHP参配算力
                    </span>
                    <span class="paowersuanBhp">
                        --
                    </span>
                </p>
            </li>
            <li>
                <p>
                    <span>
                        续单后合约金额
                    </span>
                    <span>
                        <span class="renMoney">

                        </span>
                        <span class="payMethodnew">
                            --
                        </span>
                    </span>
                </p>
            </li>
            <li>
                <p>
                    <span>
                        需补差价
                    </span>
                    <span style="color: #FF5454;">
                        <span class="contanPrices">
                            0
                        </span>
                        <span class="payMethodnew">

                        </span>
                    </span>
                </p>
            </li>
        </ul>
    </div>
    <div class="buttonsmall">
        <ul class="blanceNum">
            <li class="showCnyLi" style="display: none;">
                <p>
                    <img src="../../image/cnyiconimg.png"> CNY
                </p>
                <p>
                    可用: <span class="myCnyCoin">--</span>
                </p>
            </li>
            <li class="showUsdtLi" style="display: none;">
                <p>
                    <img src="../../image/usdt.png"> USDT
                </p>
                <p>
                    可用: <span class="myUsdtCoin">--</span>
                </p>
            </li>
        </ul>
        <button id="checkRent">
            立即续单
        </button>
    </div>
    <script src="../../script/autosize.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/jquery_three_two_one.js"></script>
    <script src="../../script/app.js"></script>
    <script>
        apiready = function () {
            var app = new APP();
            app.headerMap();
            var account = app.getAccount();
            var showBhpc = api.pageParam.bhpcisshow;//是否是BHP
            var macchineId = api.pageParam.machineID;//订单ID
            var coinType = api.pageParam.coinType;
            var machdata = api.pageParam.machineData;//机器所有详情
            var regularDateNum = machdata.rawRegularDateNum;//订单天数
            var myMoney = 0, myUsdt = 0;//初始化金额
            var oldOrderMoney = machdata.totalDeposit;//原订单总金额
            var nowOrderMoney = app.accMoreMul(machdata.basePower, 425, machdata.num);//订单标准金额
            var isOpenLineup = false;//是否开启自动续单排队
            if (machdata.paymentCurrencyCode != "USDT") {
                nowOrderMoney = app.accMoreMul(machdata.basePower, 3000, machdata.num);
            }
            var totalBasePower = app.accMul(machdata.basePower, machdata.num);//总基础算力
            var limitNumData = 0;//库存数量
            $(".renMoney").text(nowOrderMoney);
            $(".daysNum").text(regularDateNum);
            $("#renewDays input[type=radio][value=" + regularDateNum + "]").attr("checked", 'checked');
            $(".cantractDays").text(regularDateNum + "天");
            $(".payMethodnew").text(machdata.paymentCurrencyCode != "USDT" ? "CNY" : "USDT");
            var needMonney = app.numSub(nowOrderMoney, oldOrderMoney);
            if (Number(needMonney) > 0) {
                $(".contanPrices").text(needMonney);
            }
            $(".arriveTimenew").text(machdata.endTime.split(" ")[0]);
            var limitRentUnit = " T";
            function getFloatPower(num, dataArr) {
                for (var i = 0; i < dataArr.length; i++) {
                    if (num == dataArr[i].keys) {
                        return dataArr[i].value;
                    }
                }
            }
            function getButton(arr, getdaysDays) {
                var daysPower = {};
                for (var i = 0; i < arr.length; i++) {
                    if (getdaysDays == arr[i].days) {
                        daysPower = {
                            arrRegularPower: arr[i].regularPower,
                            arrFloatPower: arr[i].floatPower,
                            limitNum: arr[i].reletNum
                        }
                    }
                }
                return daysPower
            }
            var newToatalPower = 0, regularNum = 0; floatPowerNews = 0; //新到手算力
            $(".paowersuan").text(app.accMul(machdata.computingPower, machdata.num) + limitRentUnit);
            if (machdata.isBhpPos == 1) {
                $(".showBhpPowerNum").show();
                $(".paowersuanBhp").text(app.accMul(machdata.bhpPower, machdata.num) + limitRentUnit);
            }
            //请求用户常用币种数量
            function getCoinNum() {
                app.specialCoin(account, function (ret) {
                    myMoney = app.sliceNum(ret.data.lists.CNY, 2);
                    myUsdt = app.sliceNum(ret.data.lists.USDT, 4);
                    if (machdata.paymentCurrencyCode != "USDT") {
                        $(".myCnyCoin").text(myMoney);
                        $(".showCnyLi").show();
                    } else {
                        $(".myUsdtCoin").text(myUsdt);
                        $(".showUsdtLi").show();
                    }
                })
            }
            getCoinNum();
            var thistimeData = Number(app.getCurStamp()); //当前时间 S
            var endTime = machdata.endTime ? Number(app.toSecond(machdata.endTime)) : 0;//锁定时间
            var dataSce = endTime * 1000; //预计开挖时间 ms
            var getChooseData = regularDateNum;//选择续单天数
            function changeText(limitNum, totalBasePower) {
                limitNumData = limitNum;
                if (Number(limitNumData) >= 0) {
                    $(".renewNumLimit").show();
                    $(".limitNumData").text(limitNum + "T");
                } else {
                    $(".renewNumLimit").hide();
                }
                if (limitNum < totalBasePower) {
                    $(".limitNoTips").show();
                    if (thistimeData > endTime) {
                        $(".inputBox,.showActiviy").show();
                    }
                } else {
                    $(".limitNoTips,.inputBox,.showActiviy").hide();
                    $("#checkchargeBtc").prop("checked", false);
                    isOpenLineup = false;
                }
            }
            //请求配置浮动相关数据
            function loadPage(machdata) {
                app.ajaxPro({
                    url: "order/regular-config",
                    values: {
                        token: account.token,
                        orderId: macchineId
                    },
                    openFlower: true
                }, function (ret) {
                    if (ret.code == 200) {
                        var getmonthData = ret.data;
                        var getdaysPower = getButton(ret.data, regularDateNum);//处理数组 同时初始化原天数据
                        regularNum = app.accMul(getdaysPower.arrRegularPower, machdata.basePower);
                        floatPowerNum = app.accMul(getdaysPower.arrFloatPower, machdata.basePower);
                        changeText(getdaysPower.limitNum, totalBasePower);
                        if (machdata.isFloatPower == 0) {
                            floatPowerNum = 0;
                        }
                        newToatalPower = app.accMul(app.numSub(app.numSub(app.moreAccAdd(machdata.computingPower, regularNum, floatPowerNum), machdata.regularPower), machdata.floatPower), machdata.num);//新到手算力
                        $(".chooseText").text(
                            app.sliceNum(newToatalPower, 2) + limitRentUnit
                        );
                        if (machdata.state2 == 2) {
                            $(".unitPrice").text(machdata.rawTotalDeposit);
                        } else {
                            $(".unitPrice").text(machdata.totalDeposit);
                        }
                        if (machdata.currencyCode != "BTC") {
                            limitRentUnit = " M";
                        }
                        $(".payMethod").text(machdata.paymentCurrencyCode == "BCNY" ? "OTC余额" : machdata.paymentCurrencyCode);
                        $("#renewDays input").on("change", function () {
                            getChooseData = $(this).val().trim();
                            $(".daysNum").text(getChooseData);
                            var monthPower = getButton(getmonthData, getChooseData);
                            regularNum = app.accMul(monthPower.arrRegularPower, machdata.basePower);
                            floatPowerNum = app.accMul(monthPower.arrFloatPower, machdata.basePower);
                            changeText(monthPower.limitNum, totalBasePower);
                            if (machdata.isFloatPower == 0) {
                                floatPowerNum = 0;
                            }
                            if (thistimeData > endTime) {
                                $(".arriveTime").text(app.showdate(getChooseData));
                            } else {
                                $(".arriveTime").text(app.showdateArr(dataSce, getChooseData));
                            }
                            newToatalPower = app.accMul(app.numSub(app.numSub(app.moreAccAdd(machdata.computingPower, regularNum, floatPowerNum), machdata.regularPower), machdata.floatPower), machdata.num);//新到手算力
                            $(".chooseText").text(
                                app.sliceNum(newToatalPower, 2) + limitRentUnit
                            );
                            $("#chooseText").text(getChooseData);
                        })
                        $("#hashrate").on("click", function (params) {
                            var param = {
                                dtype: "dialog22",
                                data: {
                                    newAllPower: app.sliceNum(newToatalPower, 2) + limitRentUnit,
                                    powerList: [{
                                        name: "基础算力",
                                        Power: app.sliceNum(app.accMul(machdata.basePower, machdata.num), 2) + limitRentUnit
                                    },
                                    {
                                        name: "浮动算力",
                                        Power: app.sliceNum(app.accMul(floatPowerNum, machdata.num), 2) + limitRentUnit
                                    },
                                    {
                                        name: "达标算力",
                                        Power: app.sliceNum(app.accMul(machdata.pePower, machdata.num), 2) + limitRentUnit
                                    },
                                    {
                                        name: "期货算力",
                                        Power: app.sliceNum(app.accMul(machdata.futuresPower, machdata.num), 2) + limitRentUnit
                                    },
                                    {
                                        name: "定期算力",
                                        Power: app.sliceNum(app.accMul(regularNum, machdata.num), 2) + limitRentUnit
                                    }
                                    ]
                                }
                            };
                            app.dialog(param);
                        });
                        if (thistimeData > endTime) {
                            $(".arriveTime").text(app.showdate(getChooseData));
                        } else {
                            $(".arriveTime").text(app.showdateArr(dataSce, getChooseData));
                        }
                        $(".machineName").text(machdata.productName);
                        $("#checkRent").on("click", function () {
                            if (Number(totalBasePower) > Number(limitNumData) && !$("#checkchargeBtc").prop("checked") && Number(thistimeData) > Number(endTime)) {
                                app.toast("库存不足,请先加入排队队列");
                                return
                            }
                            if (Number(totalBasePower) > Number(limitNumData) && Number(thistimeData) < Number(endTime)) {
                                app.toast("库存不足,请更换选择");
                                return
                            }
                            var param = {
                                dtype: "dialog1",
                                data: {
                                    text: "亲,你确定要续单" + getChooseData + "天吗？",
                                    btns: [{
                                        name: "我要续单",
                                        event: "ok_renew"
                                    },
                                    {
                                        name: "残忍拒绝",
                                        event: "stop_renew"
                                    }
                                    ]
                                }
                            };
                            app.dialog(param);
                        });
                    }
                });
            }
            loadPage(machdata);
            $("#checkchargeBtc").on("change", function () {
                isOpenLineup = $(this).is(":checked");
            })
            app.listen("ok_renew", function () {
                if ((Number(needMonney) > 0 && Number(needMonney) > Number(myMoney) && machdata.paymentCurrencyCode != "USDT") || (Number(needMonney) > 0 && Number(needMonney) > Number(myUsdt) && machdata.paymentCurrencyCode == "USDT")) {
                    app.toast("余额不足,请充值");
                    setTimeout(function (params) {
                        var pageValue = {
                            name: "littlemoneyrecharge",
                            subpage: "extrapage/littlemoneyrecharge",
                            title: "充值",
                            param: {
                                pageName: "littlemoneyrecharge",
                                goMyPage: true
                            },
                            allowEdit: true
                        }
                        app.setNavBarAttr(pageValue);
                    }, 2000)
                    return
                }
                var isAppointment = 0;
                if (Number(thistimeData) > Number(endTime) && Number(totalBasePower) > Number(limitNumData)) {
                    isAppointment = 1;
                }
                var param = {
                    dtype: "dialog103",
                    data: {
                        beforePower: app.accMul(machdata.computingPower, machdata.num),
                        arrTime: thistimeData > endTime ? app.showdate(getChooseData) : app.showdateArr(dataSce, getChooseData),
                        btcPower: app.sliceNum(newToatalPower, 2),
                        bhppower: app.sliceNum(app.accMul(machdata.bhpPower, machdata.num), 2),
                        isAppointment: isAppointment
                    }
                };
                app.dialog(param);
                return
            });
            app.listen("confirmRenew", function () {
                if (Number(thistimeData) > Number(endTime)) {
                    app.ajaxPro({
                        url: "order/renewal",
                        values: {
                            token: account.token,
                            orderId: macchineId,
                            type: getChooseData,
                            joinQueue: isOpenLineup ? 1 : 0 // 0不加入 1加入队列
                        },
                        openFlower: true
                    }, function (ret) {
                        if (ret.code == 200) {
                            app.trigger("renew_success");
                            app.toast("续单成功");
                            setTimeout(function (params) {
                                app.closeW();
                            }, 2000);
                        } else {
                            app.toast(ret.message);
                        }
                    })
                    return
                }
                app.ajaxPro({
                    url: "order/batch-book-renewal",
                    values: {
                        token: account.token,
                        orderIds: macchineId,
                        type: getChooseData,
                        join_queue: isOpenLineup ? 1 : 0
                    },
                    openFlower: true
                }, function (ret) {
                    if (ret.code == 200) {
                        if (ret.message == "success") {
                            app.toast("续单成功")
                        } else {
                            app.toast(ret.message);
                        }
                        setTimeout(function (params) {
                            app.trigger('transferSe');
                            app.closeW()
                        }, 2000);
                    } else {
                        app.toast(ret.message);
                    }
                })

            })
            var events = ["littlemoney_recharge_success", "buyBcnySucceed"];
            app.listen(events, function () {
                app.reload();
            });
        };
    </script>
</body>

</html>